<template>
    <div class="container">
        <div class="testBox">
            <div class="header">
                <!--<div class="flowChartName">招商银行催收流程话术信息图</div>-->
                <el-select
                    v-model="flowChartName"
                    style="border: none;"
                    @change="changeFlow"
                    placeholder="请先选择一个决策流程"
                    clearable
                >
                    <el-option
                        v-for="(item,index) in $store.getters.allConfigure"
                        :key="index"
                        :label="item.groupName"
                        :value="item.id"
                    />
                </el-select>
                <div class="endTalk" @click="endTalk(flowChartName)">结束会话</div>
            </div>
            <div class="body">
                <div class="bodyLeft">
                    <div class="body_left_top" id="robitScroll">
                        <ul v-for="(item,index) in robit" :key="index+11" style="min-height: 0;">
                            <li :class="[item.flag ===2?'myanswer':'rabit_talk']">
                                <img
                                    :src="require('@/assets/img/userPicture.png')"
                                    alt
                                    v-if="item.flag === 2"
                                />
                                <img
                                    :src="require('@/assets/img/robitPicture.png')"
                                    alt
                                    v-if="item.flag !== 2"
                                />
                                <span>
                                    <i
                                        class="robitName"
                                        v-if="item.flag !== 2"
                                    >{{item.nextScriptCode}}</i>
                                    <i class="robitName_r" v-if="item.flag === 2">马乔乔小姐姐</i>
                                    <div
                                        style="width: 122%; height: 1px; background: #fff; clear:both; margin-top: 10px; margin-bottom: 10px; margin-left: -20px;"
                                    ></div>
                                    <div>{{item.msg}}</div>
                                </span>
                            </li>
                            <div
                                style="font-size: 12px; color: #ccc;clear: both; margin-top: 20px; margin-bottom: 20px;"
                                v-if="item.endFlag === '1'"
                            >
                                - - -
                                当前会话已结束 - - -
                            </div>
                        </ul>
                    </div>
                    <div class="body_left_bottom">
                        <el-input
                            class="txtIpt"
                            placeholder="请在此处输入对话"
                            type="textarea"
                            v-model="info"
                            @keyup.enter.stop="sendMsg"
                        ></el-input>
                        <div style="display: flex; justify-content: space-between">
                            <el-select
                                v-model="meaning"
                                style="margin-top: 10px;width: 380px;"
                                clearable
                                placeholder="请选择语义"
                                @change="changeMeaning"
                                filterable
                            >
                                <el-option-group
                                    v-for="(group,groupIndex) in $store.getters.allRouteMeaning"
                                    :key="groupIndex"
                                    :label="group.groupName"
                                    :value="group.groupName"
                                >
                                    <el-option
                                        v-for="(item,index) in group.customerMeaningList"
                                        :key="index"
                                        :label="item.meaningLabel"
                                        :value="item.meaningLabel"
                                    ></el-option>
                                </el-option-group>
                            </el-select>
                            <el-button
                                class="send"
                                size="mini"
                                type="primary"
                                @click="sendMsg"
                                :disabled="info.length === 0 || !flowChartName"
                            >发送</el-button>
                        </div>
                    </div>
                </div>
                <div class="bodyRight">
                    <div class="body_right_top">用户画像</div>
                    <div class="peoplePic">
                        <img :src="require('@/assets/img/userPicture.png')" alt />
                    </div>

                    <div style="clear: both; margin-top: 60px;" v-if="!userInfo">
                        <span
                            style="font-size: 14px; color: #333; font-weight: 600; margin-right: 10px;"
                        >请选择用户</span>
                        <el-select
                            v-model="userInfo"
                            style="width: 150px;"
                            placeholder="请选择用户"
                            @change="changeUser"
                            clearable
                        >
                            <el-option
                                v-for="(item,index) in userList"
                                :value="item.name"
                                :label="item.name"
                                :key="index"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="userInfo" v-else>
                        <p>
                            <span>姓名：</span>
                            <b>{{userInfoForm.name}}</b>
                        </p>
                        <p>
                            <span>年龄：</span>
                            <b>{{userInfoForm.age}}</b>
                        </p>
                        <p>
                            <span>性别：</span>
                            <b>{{userInfoForm.sex}}</b>
                        </p>
                        <p>
                            <span>卡张数：</span>
                            <b>{{userInfoForm.cardAmount}}</b>
                        </p>
                        <p>
                            <span>超现金额：</span>
                            <b>{{userInfoForm.overLimit}}</b>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'testFlowChart',
    data() {
        return {
            userInfo: '',
            info: '',
            robit: [],
            userInfoForm: {},
            flowChartName: '',
            meaning: '',
            meaningNo: '',
            userList: [{
                name: '王杰',
                cardAmount: '1',
                overLimit: '10000',
                sex: '男',
                age: '60'
            }, {
                name: '赵雪',
                cardAmount: '1',
                overLimit: '0',
                sex: '女',
                age: '16'
            }, {
                name: '帅波',
                cardAmount: '2',
                overLimit: '10',
                sex: '男',
                age: '40'
            }, {
                name: '康康',
                cardAmount: '2',
                overLimit: '0',
                sex: '男',
                age: '30'
            }]
            //  endFlag为1时是结束话术

        };
    },
    created() {
        this.$store.dispatch('getAllRouteMeaning');
        this.$store.dispatch('setAllConfigure');
        if ((this.flowChartName || this.$route.query.id) && this.userInfo) {
            this.getUruleMutual();
        }
    },
    watch: {
        '$store.getters.allConfigure'(val) {
            if (val) {
                if (this.$route.query.id) {
                    val = val.find(item => Number(item.id) === Number(this.$route.query.id));
                    this.flowChartName = val.groupName;
                }
            }
        }
    },
    methods: {
        changeUser(val) {
            this.userList.forEach(item => {
                if (item.name === val) {
                    this.userInfoForm = item;
                }
            });
            if (this.flowChartName || this.$route.query.id) {
                this.getUruleMutual()
            }
        },
        endTalk(flowChartName) {
            this.robit = [];
            this.info = '';
            this.userInfo = ''
            // this.flowChartName = '';
            // let form = {};
            // form.configId = flowChartName;
            // this.$post.flowChart.uruleMutual(form)
            //   .then((res) => {
            //     if (res.data.success) {
            //       let obj = {};
            //       obj.msg = res.data.content.nextScriptMessage;
            //       obj.nextScriptCode = res.data.content.nextScriptCode;
            //       obj.flag = 1;
            //       this.robit.push(obj);
            //       this.changeScroll();
            //     }
            //   });
        },
        changeFlow() {
            this.robit = [];
            if (this.flowChartName && this.userInfo) {
                this.getUruleMutual();
            }
        },
        sendMsg() {
            if (this.info) {
                let obj = {};
                obj.msg = this.info;
                obj.flag = 2;

                this.getUruleMutual(this.info);
                if (this.meaningNo) {
                    obj.meaningNo = this.meaningNo;
                }
                this.robit.push(obj);
                this.info = '';
                this.changeScroll();
            }

        },
        changeMeaning() {
            this.info = JSON.parse(JSON.stringify(this.meaning));
            this.meaning = '';
        },
        changeScroll() {
            let robitScroll = document.getElementById('robitScroll');
            this.$nextTick(() => {
                robitScroll.scrollTop = robitScroll.scrollHeight;
            });
        },
        getUruleMutual(msg) {
            let form = {};
            if (this.$route.query.id) {
                form.configId = this.$route.query.id;
            } else {
                form.configId = this.flowChartName;
            }
            if (msg) {
                form.message = msg;
            }
            form.cardAmount = this.userInfoForm.cardAmount
            form.overLimit = this.userInfoForm.overLimit
            this.$post.flowChart.uruleMutual(form)
                .then((res) => {
                    if (res.data.success) {
                        let obj = {};
                        obj.msg = res.data.content.nextScriptMessage;
                        obj.nextScriptCode = res.data.content.nextScriptCode;
                        obj.flag = 1;
                        obj.endFlag = res.data.content.endFlag;
                        this.robit.push(obj);

                        if (res.data.content.endFlag === '1') {
                            let obj = {};
                            obj.configId = form.configId;
                            this.$post.flowChart.uruleMutual(obj)
                                .then((res) => {
                                    if (res.data.success) {
                                        let meaningObj = {};
                                        meaningObj.msg = res.data.content.nextScriptMessage;
                                        meaningObj.nextScriptCode = res.data.content.nextScriptCode;
                                        meaningObj.flag = 1;
                                        meaningObj.endFlag = res.data.content.endFlag;
                                        this.robit.push(meaningObj);
                                    }
                                });
                        }
                        this.changeScroll();


                    }
                });
        },
    }
};
</script>

<style scoped>
.selectIpt {
    text-align: center;
    border: none;
    background: red;
}

ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rabit_talk {
    clear: both;
    float: left;
    margin-bottom: 20px;
}

.rabit_talk img {
    float: left;
}

.rabit_talk span {
    max-width: 360px;
    background: #d9e5f8;
    padding: 10px;
    display: inline-block;
    margin-left: 10px;
    -webkit-border-radius: 0 10px 10px 10px;
    -moz-border-radius: 0 10px 10px 10px;
    border-radius: 0 10px 10px 10px;
    color: #666;
    font-weight: 600;
    text-align: left;
}

.rabit_talk i,
.myanswer i {
    padding: 2px 10px;
    height: 20px;
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: #a6bee4;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
}

.myanswer i {
    color: #ccb1aeff;
}

.myanswer span {
    max-width: 360px;
    background: #f7dbd8;
    padding: 10px;
    display: inline-block;
    margin-right: 10px;
    -webkit-border-radius: 10px 0 10px 10px;
    -moz-border-radius: 10px 0 10px 10px;
    border-radius: 10px 0 10px 10px;
    color: #666;
    font-weight: 600;
    text-align: left;
}

.myanswer img {
    float: right;
}

.myanswer {
    float: right;
    clear: both;
    margin-bottom: 20px;
}

.testBox {
    width: 780px;
    height: 660px;
    -webkit-box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
    -moz-box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
    box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid rgba(151, 151, 151, 1);
    margin: 0 auto;
    overflow: hidden;
}

.header {
    height: 56px;
    border-bottom: 1px solid #979797;
    display: flex;
    justify-content: space-between;
    line-height: 56px;
    padding: 0 20px 0 20px;
}

.endTalk {
    width: 110px;
    height: 32px;
    background: rgba(255, 242, 236, 1);
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    line-height: 32px;
    margin-top: 12px;
    color: #9b151f;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.flowChartName {
    color: #3578f6;
    font-size: 18px;
    font-weight: 600;
}

.body {
    display: flex;
}

.bodyLeft {
    width: 540px;
    height: 602px;
    border-right: 1px solid #979797;
}

.bodyRight {
    width: 236px;
    height: 602px;
    background: #f2f6fb;
}

.body_left_top {
    height: 440px;
    width: 539px;
    overflow-y: scroll;
    padding: 10px;
}

.body_left_top::-webkit-scrollbar {
    width: 4px;
    height: 50px !important;
}

.body_left_top::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 2px;
    background: rgba(207, 217, 230, 1);
}

.body_left_top::-webkit-scrollbar-track {
    border-radius: 2px;
    background: rgba(207, 217, 230, 1);
}

.body_left_bottom {
    width: 538px;
    height: 160px;
    background: #f2f6fb;
    padding: 8px;
}

.txtIpt {
    width: 520px;
}

/deep/ .el-textarea__inner {
    height: 98px;
    resize: none;
}

.chooseMeaning {
    width: 380px;
    height: 32px;
    border: 1px solid rgba(53, 120, 246, 1);
    line-height: 32px;
    background: #fff;
    color: #3578f6;
    font-weight: 600;
    margin-top: 11px;
}

.send {
    width: 120px;
    height: 32px;
    margin-top: 11px;
}

.peoplePic {
    width: 160px;
    height: 160px;
}

.peoplePic img {
    width: 100%;
    height: 100%;
    margin-left: 40px;
    margin-top: 30px;
}

.body_right_top {
    width: 237px;
    height: 45px;
    background: rgba(207, 217, 230, 1);
    line-height: 45px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.userInfo {
    margin-top: 60px;
}

.userInfo p b {
    width: 80px;
    text-align: left;
    display: inline-block;
}

.userInfo p span {
    display: inline-block;
    font-weight: 600;
    width: 112px;
    text-align: right;
    height: 28px;
}
</style>
